<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/img/logo/logo.png" rel="icon">
    <title>Serverless Platform</title>
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Select2 -->
    <link href="/static/vendor/select2/dist/css/select2.min.css" rel="stylesheet" type="text/css">
    <!-- Bootstrap DatePicker -->
    <link href="/static/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- Bootstrap Touchspin -->
    <link href="/static/vendor/bootstrap-touchspin/css/jquery.bootstrap-touchspin.css" rel="stylesheet">
    <!-- ClockPicker -->
    <link href="/static/vendor/clock-picker/clockpicker.css" rel="stylesheet">
    <!-- RuangAdmin CSS -->
    <link href="/static/css/ruang-admin.min.css" rel="stylesheet">
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
</head>

<body id="page-top">
<!-- path-->
<div class="d-sm-flex align-items-center justify-content-between">
    <h1 class="h3 mb-0 text-gray-800" onclick="pullData()">Deploy New Function</h1>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="./">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page"><a href="#">Function Deploy</a></li>
        <li class="breadcrumb-item active" aria-current="page">STEP TWO</li>
    </ol>
</div>
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
    <h6 class="m-0 font-weight-bold text-primary">STEP 2 : CONFIGURE<img src="/static/images/yamlinfo.png"
                                                                         style="width: 20px;height: 20px;margin-left: 10px">
    </h6>
    <button type="button" class="btn btn-primary" style="float: right;margin-right: 20px" onclick="pushData()">Next Step:
        Coding
    </button>
</div>
<div class="row" style="width: 100%">
    {#    <div class="col-lg-6">#}
    {#        <div class="card mb-4" style="margin-left: 20px">#}
    {#            <div class="card-body" style="padding: 0px">#}
    {#                <div id="reference" style="height: 500px;">#}
    {##}
    {#                </div>#}
    {#            </div>#}
    {#        </div>#}
    {#    </div>#}
    <div class="col-lg-12">
        <div class="card mb-4">
            <div class="card-body" style="padding: 0px;margin-left: 20px;">
                <div id="editor" style="height: 700px;"></div>
            </div>
        </div>
    </div>

</div>


<script src="/static/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/src/keybinding-vim.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/src/ext-beautify.js" type="text/javascript" charset="utf-8"></script>
<script>
    const editor = ace.edit("editor");
    editor.setTheme("ace/theme/dreamweaver");
    editor.setKeyboardHandler("ace/keyboard/vim")
    editor.session.setMode("ace/mode/yaml");
    editor.setFontSize(16)
    editor.session.setTabSize(2)

    function pushData() {
        $.post('/function/write_function_yml/', {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'data': JSON.stringify(jsyaml.load(editor.getValue()), null, 2),
            'username': '{{ username }}',
            'function_name': '{{ function_name }}'
        }, function (r) {
            if (r) {
                window.location.href = '/function/function_deploy_step_three?username={{ username }}&function_url={{ function_url }}&function_name={{ function_name }}&function_lang={{ function_lang }}'
            }
        })
    }

    $(function () {
        $.post('/function/read_function_yml/', {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'username': '{{ username }}',
            'function_name': '{{ function_name }}'
        }, function (data) {
            const value = jsyaml.dump(data)
            editor.setValue(value)
        })
    })

    function pullData() {
        $.post('/function/read_function_yml/', {
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'username': '{{ username }}',
            'function_name': '{{ function_name }}'
        }, function (data) {
            console.log(data)
            console.log(jsyaml.dump(data))
            editor.setValue(jsyaml.dump(data))
        })
    }
</script>
<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>


<!-- Select2 -->
<script src="/static/vendor/select2/dist/js/select2.min.js"></script>
<!-- Bootstrap Datepicker -->
<script src="/static/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap Touchspin -->
<script src="/static/vendor/bootstrap-touchspin/js/jquery.bootstrap-touchspin.js"></script>
<!-- ClockPicker -->
<script src="/static/vendor/clock-picker/clockpicker.js"></script>
<!-- RuangAdmin Javascript -->
<script src="/static/js/ruang-admin.min.js"></script>
<!-- Javascript for this page -->
<script src="https://cdn.bootcss.com/js-yaml/3.13.1/js-yaml.min.js"></script>

<script>

</script>

</body>

</html>